<template>
  <div class="myswiper2">
    <!-- swiper2 标题 -->
    <div class="swiper2-title m-auto">
      <h3>选择KoKo · 轻松购物畅享生活</h3>
    </div>
    <div class="swiper2-context m-auto">
      <ul class="swiper2-list ">
        <li>
          <span>更专业</span>
          <b>01</b>
        </li>
        <li>
          <span>更安全</span>
          <b>02</b>
        </li>
        <li>
          <span>更高效</span>
          <b>03</b>
        </li>
        <li>
          <span>更省钱</span>
          <b>04</b>
        </li>
      </ul>
      <div>
        <swiper ref="mySwiper" :options="swiperOption" class="swiper ">
          <swiper-slide class="swiper-slide">
            <img src="../assets/swiper2/1.png" alt="" />
            <div class="swiper-content">
              <h4>KoKo更专业</h4>
              <p>
                拥有多位商品代购领域资深运营经验的电子商务专家<br />先进的全球物流网络和开拓进取的精英管理团队<br />15年来，已有超过500万海外华人成为KoKo会员<br />成功代购超过5000万件商品
              </p>
            </div>
          </swiper-slide>
          <swiper-slide class="swiper-slide">
            <img src="../assets/swiper2/2.png" alt="" />
            <div class="swiper-content">
              <h4>Panl更安全</h4>
              <p>
                知名支付及物流供应商提供支持<br />保证商品包裹从预订到打包国际快递
                （转运），正常交付用户<br />包裹丢失先行赔付，安全有保障
              </p>
            </div>
          </swiper-slide>
          <swiper-slide class="swiper-slide">
            <img src="../assets/swiper2/3.png" alt="" />
            <div class="swiper-content">
              <h4>KoKo更高效</h4>
              <p>
                订单16小时内完成购买<br />客服24小时内响应<br />商品到达24小时内完成质检<br />提交运单24小时内打包发货
              </p>
            </div>
          </swiper-slide>
          <swiper-slide class="swiper-slide">
            <img src="../assets/swiper2/4.png" alt="" />
            <div class="swiper-content">
              <h4>KoKo更省钱</h4>
              <p>
                超低国际物流低至12元<br />自营（愚公坊）店铺下单享折扣<br />免邮商家国内运费全免
              </p>
            </div>
          </swiper-slide>
          <!-- 小圆点 -->
          <div class="swiper-pagination" slot="pagination"></div>
          <!-- 上下页 -->
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      now: 0,
      swiperOption: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //可以点击
        },
        // 特效: slide fade cube flip...
        effect: "slide",
      },
    };
  },
};
</script>
<style scoped>
 .swiper>>> .swiper-pagination-bullet-active{
  background-color: rgb(255, 110, 110);
}
</style>

<style lang="scss" scoped>

*{
  margin: 0;
  padding: 0;
}
.myswiper2 {
  background-color: #fafafa;
}
.m-auto {
  margin: 0 auto;
  width: 1200px;
}
// 标题
.swiper2-title {
  display: flex;
  justify-content: space-between;
  padding: 60px;
  h3 {
    font-size: 30px;
    color: #343434;
    font-weight: bold;
  }
}
// 轮播图 表单
.swiper2-list {
  display: flex;
  justify-content: space-between;
  margin: 0 80px 20px;
  li {
    cursor: pointer;
    position: relative;
    border-bottom: 10px solid transparent;
    width: 90px;
    text-align: center;
    span {
      position: absolute;
      bottom: -5px;
      left: 0;
      right: 0;
      margin: auto;
      font-size: 24px;
      color: #333;
      line-height: 22px;
    }
    b {
      font-size: 60px;
      color: #ebebeb;
      line-height: 60px;
      font-weight: bold;
    }
  }
}
//
.swiper {
  .swiper-slide {
    .swiper-content {
      padding: 40px 20px;
      position: absolute;
      top: 140px;
      left: 18px;
      min-width: 320px;
      background: #fff;
      box-shadow: 0 0 20px 0 hsl(0deg 0% 70% / 30%);
      border-radius: 10px;
      h4 {
        font-size: 24px;
        font-weight: 500;
        color: #333;
        line-height: 32px;
        margin-bottom: 20px;
      }
      p {
        font-size: 16px;
        color: grey;
        line-height: 24px;
      }
    }
  }
}
//
.swiper-button-prev {
  width: 30px;
  height: 30px;
  border: 2px solid #aaa;
  border-radius: 50%;
  top: 90%;
  left: 30px;
  right: auto;
}
//
.swiper-button-next {
  width: 30px;
  height: 30px;
  border: 2px solid #aaa;
  border-radius: 50%;
  top: 90%;
  right: auto;
  left: 200px;
}
//
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 58px;
    left: 0;
    width: 260px;
}
.swiper-pagination {
  left: 0;
  position: absolute;
  text-align: center;
}
.swiper-button-prev{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23CCCCCC'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23CCCCCC'%2F%3E%3C%2Fsvg%3E");
}



</style>